<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <title>品优购-热门PC端特卖</title>
  <link rel="shortcut icon" href="./favicon.ico" />
  <link rel="stylesheet" href="./CSS/common.css">
  <link rel="stylesheet" href="./CSS/base.css">
  <link rel="stylesheet" href="./CSS/index.css">
  <script src="./JS/animate.js"></script>
  <script src="./JS/index.js"></script>
</head>
<body>
  <!-- 快捷导航模块 start -->
  <div class="shortcut">
    <div class="w">
      <div class="fl">
        <ul>
          <li>品优购欢迎您！&nbsp;</li>
          <li><a href="javascript:;" title="请先登录">请先登录</a>&nbsp;&nbsp;</li>
          <li ><a class="font-red" href="./register.html" target="" title="免费注册">免费注册</a>&nbsp;</li>
        </ul>
      </div>
      <div class="fr">
        <ul>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">我的订单</a></dt>
                <dd><a href="javascript:;">订单1</a></dd>
                <dd><a href="javascript:;">订单2</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">我的品优购</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">品优购会员</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">企业采购</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">关注品优购</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">客户服务</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
          <li></li>
          <li>
            <div id="fr-nav">
              <dl>
                <dt><a href="javascript:;">网站导航</a></dt>
                <dd><a href="javascript:;">可加链接</a></dd>
                <dd><a href="javascript:;">可加链接</a></dd>
              </dl>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 快捷导航模块 end -->

  <!-- header头部模块制作 start -->
  <header class="header w">
    <!-- logo模块 -->
    <div class="logo">
      <h1><a href="index.html" title="品优购商城"></a></h1>
    </div>
    <!-- 搜索模块 -->
    <div class="search">
      <form action="">
        <!-- 使用autocomplete="on"  必须添加一个name属性 -->
        <input type="search" name="search" placeholder="输入您所需要查找的商品" required="required" autocomplete="on">
        <input type="submit" value="搜索">
      </form>
      
    </div>
    <!-- hotwords模块 -->
    <div class="hotwords">
      <a href="">优惠购首发</a>
      <a href="">亿元优惠</a>
      <a href="">9.9元团购</a>
      <a href="">美满99减30</a>
      <a href="">办公用品</a>
      <a href="">电脑</a>   
      <a href="">通信</a>
      
    </div>
    <!-- 购物车模块 -->
    <div class="purch">
      <button>
        <p>我的购物车</p>
      </button>
      <div class="count">
        <p>99</p>
      </div>
    </div>

  </header>
  <!-- header头部模块制作 end -->

  <!-- nav模块  start -->
  <nav class="nav">
    <div class="w">
      <div class="dropdown">
        <div class="dt">全部商品</div>
        <div class="dd">
          <ul>
            <li><a href="javascript:;">家用电器</a></li>
            <li><a href="./list.html">手机</a>、<a href="javascript:;">数码</a>、<a href="javascript:;">通信</a></li>
            <li><a href="javascript:;">电脑</a>、<a href="javascript:;">办公</a></li>
            <li><a href="javascript:;">家具</a>、<a href="javascript:;">家居</a>、<a href="javascript:;">家装</a>、<a href="javascript:;">厨具</a></li>
            <li><a href="javascript:;">男装</a>、<a href="javascript:;">女装</a>、<a href="javascript:;">童装</a>、<a href="javascript:;">内衣</a></li>
            <li><a href="javascript:;">个护化妆</a>、<a href="javascript:;">清洁用品</a>、<a href="javascript:;">宠物</a></li>
            <li><a href="javascript:;">鞋靴</a>、<a href="javascript:;">箱包</a>、<a href="javascript:;">珠宝</a>、<a href="javascript:;">奢侈品</a></li>
            <li><a href="javascript:;">户外运动</a>、<a href="javascript:;">钟表</a></li>
            <li><a href="javascript:;">汽车</a>、<a href="javascript:;">汽车用品</a></li>
            <li><a href="javascript:;">母婴</a>、<a href="javascript:;">玩具乐器</a></li>
            <li><a href="javascript:;">食品</a>、<a href="javascript:;">酒类</a>、<a href="javascript:;">生鲜</a>、<a href="javascript:;">特产</a></li>
            <li><a href="javascript:;">医药保健</a></li>
            <li><a href="javascript:;">图书</a>、<a href="javascript:;">音像</a>、<a href="javascript:;">电子书</a></li>
            <li><a href="javascript:;">彩票</a>、<a href="javascript:;">旅行</a>、<a href="javascript:;">充值</a>、<a href="javascript:;">票务</a></li>
            <li><a href="javascript:;">理财</a>、<a href="javascript:;">众筹</a>、<a href="javascript:;">白条</a>、<a href="javascript:;">保险</a></li>
          </ul>
        </div>
      </div>
      <div class="navitem">       
        <ul>
          <a href="javascript:;"><li>服装城</li></a> 
          <a href="javascript:;"><li>美妆馆</li></a> 
          <a href="javascript:;"><li>传智超市</li></a> 
          <a href="javascript:;"><li>全球购</li></a> 
          <a href="javascript:;"><li>闪购</li></a> 
          <a href="javascript:;"><li>团购</li></a> 
          <a href="javascript:;"><li>拍卖</li></a> 
          <a href="javascript:;"><li>有趣</li></a> 
        </ul>
      </div>
    </div>
  </nav>
  <!-- nav模块  end -->

  <!--main 主体部分  start -->
  <div class="main">
    <div class="w">
      <div class="fouse_news">
        <!-- focus 模块 start -->
        <div class="fouse">
          <div class="before"><<</div>
          <ul class="navImg navUl">
            <li><img src="./updown/focus.jpg" alt="" srcset=""></li>
            <li><img src="./updown/focus1.jpg" alt="" srcset=""></li>
            <li><img src="./updown/focus2.jpg" alt="" srcset=""></li>
            <li><img src="./updown/focus3.jpg" alt="" srcset=""></li>

          </ul>
          <div class="last">>></div>
          <ol class="circle">
            <!-- <li></li>
            <li></li> -->
          </ol>
        </div>
        <!-- focus 模块 end -->

        <!-- new_service 模块 start -->
        <div class="new_service">
          <div class="news">
            <div class="new-hd">
              <h1>品优购快报</h1>
              <a href="javascript:;">更多</a>
            </div>
            <div class="new-bd">
              <ul>
                <li><a href="javascript:;"><strong>[特惠]</strong>备战开学季 全民半价抢数码</a></li>
                <li><a href="javascript:;"><strong>[公告]</strong>品优稳占家电网购六成份额 超出部分隐藏</a></li>
                <li><a href="javascript:;"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></li>
                <li><a href="javascript:;"><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a></li>
                <li><a href="javascript:;"><strong>[特惠]</strong>每日享折扣品优品质游</a></li>
              </ul>
            </div>
          </div>
          <div class="service">
            <ul>
              <li><a href="javascript:;">
                <img src="./updown/话费服务话费.png" title="话费" alt="" srcset="">
                <h5>话费</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/机票.png" title="机票" alt="" srcset="">
                <h5>机票</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/电影票.png" title="电影票" alt="" srcset="">
                <h5>电影票</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/游戏.png" title="游戏" alt="" srcset="">
                <h5>游戏</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/彩票.png" title="彩票" alt="" srcset="">
                <h5>彩票</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/加油卡.png" title="加油卡" alt="" srcset="">
                <h5>加油卡</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/酒店.png" title="酒店" alt="" srcset="">
                <h5>酒店</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/_火车票.png" title="火车票" alt="" srcset="">
                <h5>火车票</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/众筹.png" title="众筹" alt="" srcset="">
                <h5>众筹</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/理财.png" title="理财" alt="" srcset="">
                <h5>理财</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown//礼品卡.png" title="礼品卡" alt="" srcset="">
                <h5>礼品卡</h5>
              </a></li>
              <li><a href="javascript:;">
                <img src="./updown/白条.png" title="白条" alt="" srcset="">
                <h5>白条</h5>
              </a></li>
            </ul>
          </div>
          <div class="bargin">
            <a href="javascript:;" title="这是广告链接"><img src="./updown/bargin.png" alt="" srcset=""></a>
          </div>
        </div>
        <!-- new_service 模块 end -->


      </div>
    </div>

  <!-- 今日推荐模块 start -->
  <div class="w recom">
    <div class="recom-hd"></div>
    <div class="recom-bd">
      <ul>
        <li><a href="javascript:;" title="优质好货">
          <div class="recom-lf">
            <h3>优质好货</h3>
            <h4 style="background-color: #00a0e8; color: #fff; ">满300减100</h4>
            <p>满500减200</p>

          </div>
          <div class="recom-rg"></div>
        </a></li>
        <li></li>
        <li><a href="javascript:;" title="品牌尾货">
          <div class="recom-lf">
            <h3>品牌尾货</h3>
            <h4 style="background-color: #5fb200; color: #fff;">满300减100</h4>
            <p>团购低至9.9</p>
            <h3 style="background-color: #5fb200; width: 57px;height: 20px;text-align: center;line-height: 20px; border-radius: 45px;margin-top: 20px;">团购</h3>
          </div>
          <div class="recom-rg" style="background-image: url(./updown/phone.png);"></div>
        </a></li>
        <li></li>
        <li><a href="javascript:;" title="时尚穿搭">
          <div class="recom-lf">
            <h3>时尚穿搭</h3>
            <h4 style="background-color: #e2162f; color: #fff;">低至3.6折</h4>
            <p>暑期出游季</p>
            <h3
              style="background-color: #e2162f; width: 57px;height: 20px;text-align: center;line-height: 20px; border-radius: 45px;margin-top: 20px;">
              闪购</h3>
          </div>
          <div class="recom-rg" style="background-image: url(./updown/pakge.png);"></div>
        </a></li>
        <li></li>
        <li><a href="javascript:;" title="0点上新">
          <div class="recom-lf">
            <h3>0点上新</h3>
            <h4 style="background-color: #0085fb; color: #fff;">全场包邮</h4>
            <p>低至1折</p>
            <h3
              style="background-color: #0085fb; width: 57px;height: 20px;text-align: center;line-height: 20px; border-radius: 45px;margin-top: 20px;">
              闪购</h3>
          </div>
          <div class="recom-rg" style="background-image: url(./updown/watch.png);"></div>
        </a></li>
      </ul>
    </div>
  </div>
  <!-- 今日推荐模块 end -->

  <!-- 猜你喜欢 start -->
  <div class="love w">
    <h3>
      <span>猜你喜欢</span>
      <a href="javascript:;"><span>换一批</span></a>
    </h3>
    <div class="love-list">
      <ul>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/computer.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>华为笔记本电脑 MateBook D 14 2021款 14英寸 I5</p>
           <div class="span"><span>￥</span> <span> 5399.00 </span></div>
          </div>
        </li>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/car.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>蛟龙400cc机车摩托车重型机车双缸水冷可上牌 红色 定金</p>
            <div class="span"><span>￥</span> <span> 1000.00 </span></div>
          </div>
        </li>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/shose.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>南极人新品男鞋子休闲鞋增高板鞋男时尚小白鞋潮流鞋靴</p>
            <div class="span"><span>￥</span> <span> 388.00 </span></div>
          </div>
        </li>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/hat.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>MLB棒球帽男女通用弯檐帽子男情侣款帽围可调节</p>
            <div class="span"><span>￥</span> <span> 339.00 </span></div>
          </div>
        </li>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/boot.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>新秀丽拉杆箱万向轮行李箱男女旅行箱密码箱</p>
            <div class="span"><span>￥</span> <span> 1744.00 </span></div>
          </div>
        </li>
        <li>
          <div class="img"><a href="javascript:;" title="点击进入"><img src="./updown/schoolbag.png" alt="" srcset=""></a></div>
          <div class="prase">
            <p>迪士尼（Disney）小学生书包</p>
            <div class="span"><span>￥</span> <span> 589.00 </span></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 猜你喜欢 end -->

  </div>
  <!--main 主体部分  end -->

  <!-- floor 楼层部分 start -->
  <div class="floor">
    <!-- 1楼家用电器 -->
    <div class="w jiadian">
      <div class="box-hd">
        <h3>家用电器</h3>
        <div class="tab-list">
          <ul>
            <li><a href="javascript:;">热门</a>|</li>
            <li><a href="javascript:;">大家电</a>|</li>
            <li><a href="javascript:;">生活电器</a>|</li>
            <li><a href="javascript:;">厨房电器</a>|</li>
            <li><a href="javascript:;">个护健康</a>|</li>
            <li><a href="javascript:;">应季电器</a>|</li>
            <li><a href="javascript:;">空气/净水</a>|</li>
            <li><a href="javascript:;">新奇特</a>|</li>
            <li><a href="javascript:;">高端电器</a></li>
          </ul>
        </div>
      </div>
      <div class="box-bd">
        <div class="tab-content">
          <ul>
            <li>
              <div class="bd-box1">
                <div class="top">
                  <dl>
                    <dd><a href="javascript:;">节能补贴</a></dd>
                    <dd><a href="javascript:;">4K电视</a></dd>
                    <dd><a href="javascript:;">空气净化器</a></dd>
                    <dd><a href="javascript:;">IH电饭煲</a></dd>
                    <dd><a href="javascript:;">滚筒洗衣机</a></dd>
                    <dd><a href="javascript:;">电热水器</a></dd>
                  </dl>
                </div>
                <div class="bottom">
                  <div class="title">
                    <h3>三星曲面电视</h3>
                    <h5>抽奖送豪礼</h5>
                  </div>
                  <div class="bottom-img"><a href="javascript:;"><img title="三星电视" src="./updown/TV.jpg" width="100%" height="100%" alt="" srcset=""></a></div>
                </div>
              </div>
              <div class="bd-box2">
                <div class="hidden">
                  <dl>
                    <dd>
                      <div class="box2-p">烧水壶智能光控泡茶壶茶具套装满299.00减40.00</div>
                      <div class="box2-img"><a href="javascript:;"><img src="./updown/tea.jpg" title="烧水壶智能光控泡茶壶茶具套" alt="烧水壶智能光控泡茶壶茶具套装满299.00减40.00" srcset=""></a></div>
                    </dd>
                    <!-- 后面dd可以进行类似修改 -->
                    <dd></dd>
                    <dd></dd>
                  </dl>
                  <div class="box2-nav">
                    <!-- 有几个dd就有几个li -->
                    <ul>
                      <li><a href="javascript:;"></a></li>
                      <li><a href="javascript:;"></a></li>
                      <li><a href="javascript:;"></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="bd-box3">
                <div class="box3-top">
                  <a href="javascript:;" title="烘培节">
                    <section>
                      <h3>每满200减20元</h3>
                      <p>烘培节1元抢购</p>
                    </section>
                    <div class="img"><img src="./updown/cure.jpg" alt="" srcset=""></div>
                  </a>
                </div>
                <div class="box3-bottom">
                  <a href="javascript:;" title="乐视电视">
                    <section>
                      <h3>买乐视电视享钜惠</h3>
                      <p>送60个月会员</p>
                    </section>
                    <div class="img"><img src="./updown/box3-TV.jpg" alt="" srcset=""></div>
                  </a>
                </div>
              </div>
              <div class="bd-box4">
                <a href="javascript:;" title="彩电">
                  <div class="box4-top">
                    <section>
                      <h3>8.20彩电宅购节</h3>
                      <p>4k超清 钢化防爆屏网络版</p>
                    </section>
                  </div>
                  <div class="box4-bottom"><img src="./updown/box4-TV.jpg" alt="" srcset=""></div>
                </a>
              </div>
              <div class="bd-box5">
                <div class="box5-top">
                  <a href="javascript:;" title="消暑神器-空调">
                    <section>
                      <h3>消暑神器全场领券</h3>
                      <p>1元赢空调</p>
                    </section>
                    <div class="img"><img src="./updown/air.jpg" alt="" srcset=""></div>
                  </a>
                </div>
                <div class="box5-bottom">
                  <a href="javascript:;" title="电风扇">
                    <section>
                      <h3>格力电风扇家用节能落地扇</h3>
                      <p>价保30天，买贵补差！</p>
                    </section>
                    <div class="img"><img src="./updown/fan.jpg" alt="" srcset=""></div>
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- floor 楼层部分 end -->


  <!-- 底部模块 start -->
  <footer class="footer">
    <div class="w">
      <div class="mod_service">
        <ul>
          <li>
            <h5><img src="./images/正品保障2.png" alt="" srcset=""></h5>
            <div class="service_txt"> 
              <h3>正品保障</h3>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h5><img src="./images/快递车.png" alt="" srcset=""></h5>
            <div class="service_txt">
              <h3>极速物流</h3>
              <p>急速物流，急速送达</p>
            </div>
          </li>
          <li>
            <h5><img src="./images/无忧售后.png" alt="" srcset=""></h5>
            <div class="service_txt">
              <h3>无忧售后</h3>
              <p>7天无理由退换货</p>
            </div>
          </li>
          <li>
            <h5><img src="./images/特色服务.png" alt="" srcset=""></h5>
            <div class="service_txt">
              <h3>特色服务</h3>
              <p>私人定制家电套餐</p>
            </div>
          </li>
          <li>
            <h5><img src="./images/帮助.png" alt="" srcset=""></h5>
            <div class="service_txt">
              <h3>帮助指南</h3>
              <p>您的购物指南</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="mod_help">
        <ul>
          <li>
            <dl class="dl">
              <dt>购物指南</dt>
              <dd><a href="javascript:;">购物流程</a> </dd>
              <dd><a href="javascript:;">会员介绍</a> </dd>
              <dd><a href="javascript:;">生活旅行/团购</a> </dd>
              <dd><a href="javascript:;">常见问题</a> </dd>
              <dd><a href="javascript:;">大家电</a> </dd>
              <dd><a href="javascript:;">联系客服</a> </dd>
            </dl>
          </li>
          <li>
            <dl class="dl">
              <dt>配送方式</dt>
              <dd><a href="javascript:;">上门自提</a> </dd>
              <dd><a href="javascript:;">211限时达</a> </dd>
              <dd><a href="javascript:;">配送服务查询</a> </dd>
              <dd><a href="javascript:;">配送费收取标准</a> </dd>
              <dd><a href="javascript:;">海外配送</a> </dd>
            </dl>
          </li>
          <li>
            <dl class="dl">
              <dt>支付方式</dt>
              <dd><a href="javascript:;">货到付款</a> </dd>
              <dd><a href="javascript:;">在线支付</a> </dd>
              <dd><a href="javascript:;">分期付款</a> </dd>
              <dd><a href="javascript:;">邮局汇款</a> </dd>
              <dd><a href="javascript:;">公司转账</a> </dd>
            </dl>
          </li>
          <li>
            <dl class="dl">
              <dt>售后服务</dt>
              <dd><a href="javascript:;">售后政策</a> </dd>
              <dd><a href="javascript:;">价格保护</a> </dd>
              <dd><a href="javascript:;">退款说明</a> </dd>
              <dd><a href="javascript:;">返修/退换货</a> </dd>
              <dd><a href="javascript:;">取消订单</a> </dd>
            </dl>
          </li>
          <li>
            <dl class="dl">
              <dt>特色服务</dt>
              <dd><a href="javascript:;">夺宝岛</a> </dd>
              <dd><a href="javascript:;">DIY装机</a> </dd>
              <dd><a href="javascript:;">延保服务</a> </dd>
              <dd><a href="javascript:;">品优购E卡</a> </dd>
              <dd><a href="javascript:;">品优购通信</a> </dd>
            </dl>
          </li>
          <li>
            <dl class="dl">
              <dt>帮助中心</dt>
              <dd class="dd"></dd>
              <dd>品优购客户端</dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="mod_explaim">
        <div class="explaim_more">
          <ul>
            <li>关于我们</li>
            <li></li>
            <li>联系我们</li>
            <li></li>
            <li>联系客服</li>
            <li></li>
            <li>商家入驻</li>
            <li></li>
            <li>营销中心</li>
            <li></li>
            <li>手机品优购</li>
            <li></li>
            <li>友情链接</li>
            <li></li>
            <li>销售联盟</li>
            <li></li>
            <li>品优购社区</li>
            <li></li>
            <li>品优购公益</li>
            <li></li>
            <li>English Site</li>
            <li></li>
            <li>Contact U</li>
          </ul>
        </div>
        <div class="explaim_address">
          <p
          >地址：北京市昌平区建材城西路金燕龙办公
          楼一层 邮编：100096 电话：400-618-4
          000 传真：010-82935100 邮箱: zh
          anghj+itcast.cn
          </p>
          <p>
            京ICP备08001421号京公网安备110108007702
          </p>
        </div>
      </div>
    </div>
  </footer>
  <!-- 底部模块 end -->



</body>
</html>